Tüübiohutuse valdamine TypeScripti testimises: Jesti integreerimise juhend

Pidevalt arenevas tarkvaraarendusmaastikus on koodi kvaliteedi säilitamine ja rakenduse töökindluse tagamine ülimalt olulised. TypeScript, oma staatilise tüübi määramise võimalustega, on kujunenud juhtivaks valikuks vastupidavate ja hooldatavate rakenduste ehitamisel. TypeScripti eelised ulatuvad aga kaugemale arendusetapist; need mõjutavad oluliselt testimist. See juhend uurib, kuidas kasutada Jesti, populaarset JavaScripti testimisraamistikku, et sujuvalt integreerida tüübiohutus oma TypeScripti testimise töövoogu. Me süveneme parimatesse praktikatesse, praktilistesse näidetesse ja strateegiatesse tõhusate ja hooldatavate testide kirjutamiseks.

Tüübiohutuse tähtsus testimisel

Tüübiohutus võimaldab arendajatel põhimõtteliselt vigu tuvastada arendusprotsessi käigus, mitte käitusajal. See on eriti kasulik testimisel, kus tüübiga seotud probleemide varajane avastamine võib hiljem ära hoida olulisi silumisjõupingutusi. Tüübiohutuse kaasamine testimisse pakub mitmeid peamisi eeliseid:

• Varajane vea tuvastamine: TypeScripti tüübikontrolli võimalused võimaldavad teil testkompileerimise ajal tuvastada tüübivastuolusid, valesid argumenditüüpe ja muid tüübiga seotud vigu, enne kui need avalduvad käitusaja tõrgetena.
• Parem koodi hooldatavus: Tüübi annotatsioonid on elav dokumentatsioon, mis muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks. Kui teste kontrollitakse tüübi järgi, tugevdavad nad neid annotatsioone ja tagavad järjepidevuse kogu teie koodibaasis.
• Täiustatud refaktoreerimise võimalused: Refaktoreerimine muutub turvalisemaks ja tõhusamaks. TypeScripti tüübikontroll aitab tagada, et muudatused ei too kaasa soovimatuid tagajärgi ega riku olemasolevaid teste.
• Vähendatud vead: Tüübiga seotud vigade varajase avastamisega saate oluliselt vähendada tootmisse jõudvate vigade arvu.
• Suurem kindlus: Hästi tüübitud ja hästi testitud kood annab arendajatele suurema kindluse oma rakenduse stabiilsuse ja töökindluse suhtes.

Jesti seadistamine TypeScriptiga

Jesti integreerimine TypeScriptiga on lihtne protsess. Siin on samm-sammuline juhend:

1. Projekti initsialiseerimine: Kui teil pole veel TypeScripti projekti, alustage selle loomisega. Uue projekti initsialiseerimine npm või yarn abil:

               npm init -y
   # või
   yarn init -y
               
   
                 
                   Copy
                 
               
             

2. Installige TypeScript ja Jest: Installige vajalikud paketid dev sõltuvustena:

               npm install --save-dev typescript jest @types/jest ts-jest
   # või
   yarn add --dev typescript jest @types/jest ts-jest
               
   
                 
                   Copy
                 
               
             

   • typescript: TypeScripti kompilaator.
   • jest: Testimisraamistik.
   • @types/jest: Jesti tüübimääratlused.
   • ts-jest: TypeScripti transformaator Jestile, mis võimaldab sellel TypeScripti koodi mõista.
3. TypeScripti konfigureerimine: Looge oma projekti juurkataloogis fail tsconfig.json. See fail määrab TypeScripti kompilaatori valikud. Põhikonfiguratsioon võib välja näha selline:

               {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true,
       "strict": true,
       "skipLibCheck": true,
       "outDir": "./dist"
     },
     "include": ["src/**/*", "test/**/*"],
     "exclude": ["node_modules"]
   }
   
               
   
                 
                   Copy
                 
               
             

   Peamised seaded:

   • target: määrab sihtkoha JavaScripti versiooni (nt es5, es6, esnext).
   • module: määrab kasutatava moodulisüsteemi (nt commonjs, esnext).
   • esModuleInterop: võimaldab koostalitlusvõimet CommonJS ja ES moodulite vahel.
   • forceConsistentCasingInFileNames: jõustab failinimede ühtlase kasutamise.
   • strict: võimaldab range tüübikontrolli. Soovitatav parema tüübiohutuse tagamiseks.
   • skipLibCheck: jätab deklareerimisfailide (.d.ts) tüübikontrolli vahele.
   • outDir: määrab JavaScripti kompileeritud failide väljundkataloogi.
   • include: määrab kompileerimisse kaasatavad failid ja kataloogid.
   • exclude: määrab kompileerimisest välja jäetavad failid ja kataloogid.

4. Jesti konfigureerimine: Looge oma projekti juurkataloogis fail jest.config.js (või jest.config.ts). See fail konfigureerib Jesti. TypeScripti toega põhikoonfiguratsioon võib välja näha selline:

               /** @type {import('ts-jest').JestConfigWithTsJest} */
   module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'node',
     testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
     transform: {
       '^.+\.(ts|tsx)?$': 'ts-jest',
     },
     moduleNameMapper: {
       '^@/(.*)$': '/src/$1',
     },
     collectCoverage: false,
     coverageDirectory: 'coverage',
   };
   
               
   
                 
                   Copy
                 
               
             

   • preset: 'ts-jest': Määrab, et kasutame ts-jesti.
   • testEnvironment: määrab testimiskeskkonna (nt 'node', 'jsdom' brauserilaadsete keskkondade jaoks).
   • testMatch: määratleb testifailidele vastavad failimustrid.
   • transform: määrab failide jaoks kasutatava transformaatori. Siin kasutame TypeScripti failide teisendamiseks ts-jest.
   • moduleNameMapper: kasutatakse moodulite aliaseerimiseks, eriti kasulik imporditee lahendamiseks, nt kasutades selliseid teid nagu `@/components` pikkade suhteliste teede asemel.
   • collectCoverage: võimaldab või keelab koodikatvuse.
   • coverageDirectory: määrab katvuse aruannete kataloogi.
5. Testide kirjutamine: Looge oma testifailid (nt src/my-component.test.ts või src/__tests__/my-component.test.ts).
6. Testide käivitamine: Lisage oma package.json-i testiskript:

               "scripts": {
       "test": "jest"
     }
   
               
   
                 
                   Copy
                 
               
             

   Seejärel käivitage oma testid, kasutades:

               npm test
   # või
   yarn test
               
   
                 
                   Copy
                 
               
             

Näide: Lihtsa funktsiooni testimine

Loome lihtsa näite tüübiohutuse testimise demonstreerimiseks. Mõelge funktsioonile, mis liidab kaks arvu:

            // src/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

            

              
                Copy
              
            
          

Nüüd kirjutame sellele funktsioonile testi Jesti ja TypeScripti abil:

            // src/math.test.ts
import { add } from './math';

test('liidab kaks arvu õigesti', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
  expect(add(0, 0)).toBe(0);
});

test('käsitleb mitte-arvulist sisendit (valesti)', () => {
  // @ts-expect-error: TypeScript püüab selle vea kinni, kui kommentaar eemaldada
  // expect(add('2', 3)).toBe(5);
});

            

              
                Copy
              
            
          

Selles näites:

• Impordime funktsiooni add.
• Kirjutame testi Jesti funktsioonide test ja expect abil.
• Testid kontrollivad funktsiooni käitumist erinevate sisenditega.
• Kommenteeritud rida illustreerib, kuidas TypeScript püüaks kinni tüübi vea, kui prooviksime funktsioonile add stringi edastada, hoides ära selle vea jõudmise käitusajani. Kommentaar `//@ts-expect-error` ütleb TypeScriptile, et ta ootaks sellel real viga.

Täiustatud testimistehnikad TypeScripti ja Jestiga

Kui teil on põhiseadistus paigas, saate uurida täiustatumaid testimistehnikaid, et parandada oma testikomplekti tõhusust ja hooldatavust.

Mockimine ja Spioonid

Mockimine võimaldab teil isoleerida koodiüksusi, asendades välised sõltuvused kontrollitud asendajatega. Jest pakub sisseehitatud mockimisvõimalusi.

Näide: API-kõnet tegeva funktsiooni mockimine:

            // src/api.ts
export async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

// src/my-component.ts
import { fetchData } from './api';

export async function processData() {
  const data = await fetchData('https://example.com/api/data');
  // Töötle andmeid
  return data;
}

            

              
                Copy
              
            
          

            // src/my-component.test.ts
import { processData } from './my-component';
import { fetchData } from './api';

jest.mock('./api'); // Mocki api moodul

test('töötleb andmeid õigesti', async () => {
  // @ts-ignore: eirab selle testi jaoks tüübi viga
  fetchData.mockResolvedValue({ result: 'success' }); // Mocki lahendatud väärtus

  const result = await processData();
  expect(result).toEqual({ result: 'success' });

  expect(fetchData).toHaveBeenCalledWith('https://example.com/api/data');
});

            

              
                Copy
              
            
          

Selles näites mockime funktsiooni fetchData moodulist api.ts. Kasutame mockResolvedValue, et simuleerida edukat API vastust ja kontrollida, kas processData käsitleb mockitud andmeid õigesti. Kasutame toHaveBeenCalledWith, et kontrollida, kas funktsiooni `fetchData` kutsuti õigete argumentidega.

Asünkroonse koodi testimine

Asünkroonse koodi testimine on kaasaegsete JavaScripti rakenduste jaoks ülioluline. Jest pakub mitmeid viise asünkroonsete testide käsitlemiseks.

Näide: Funktsiooni testimine, mis kasutab setTimeout:

            // src/async.ts
export function delayedGreeting(name: string, delay: number): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Hello, ${name}!`);
    }, delay);
  });
}

            

              
                Copy
              
            
          

            // src/async.test.ts
import { delayedGreeting } from './async';

test('tervitab viivitusega', async () => {
  const greeting = await delayedGreeting('World', 100);
  expect(greeting).toBe('Hello, World!');
});

            

              
                Copy
              
            
          

Selles näites kasutame testi sees asünkroonse toimingu käsitlemiseks async/await. Jest toetab ka asünkroonsete testide jaoks tagasihelistamisi ja lubadusi.

Koodikatvus

Koodikatvuse aruanded annavad väärtuslikku teavet selle kohta, millised teie koodi osad on testidega kaetud. Jest muudab koodikatvuse aruannete loomise lihtsaks.

Koodikatvuse lubamiseks konfigureerige oma failis jest.config.js valikud collectCoverage ja coverageDirectory. Seejärel saate oma testid katvusega lubatult käivitada.

            // jest.config.js
module.exports = {
  // ... muud konfiguratsioonid
  collectCoverage: true,
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'], // Määrake failid, millest katvust koguda
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

            

              
                Copy
              
            
          

Valik collectCoverageFrom võimaldab teil määrata, milliseid faile tuleks katvuse jaoks arvesse võtta. Valik coverageThreshold võimaldab teil määrata minimaalsed katvuse protsendid. Kui olete oma testid käivitanud, loob Jest määratud kataloogis katvusearuande.

Üksikasjaliku teabe saamiseks saate katvusearuannet vaadata HTML-vormingus.

Testipõhine arendus (TDD) TypeScripti ja Jestiga

Testipõhine arendus (TDD) on tarkvaraarendusprotsess, mis rõhutab testide kirjutamist enne tegeliku koodi kirjutamist. TDD võib olla väga tõhus tava, mis viib vastupidavama ja hästi kujundatud koodini. TypeScripti ja Jestiga on TDD protsess sujuvamaks muudetud.

1. Kirjutage ebaõnnestuv test: Alustage testiga, mis kirjeldab teie koodi soovitud käitumist. Test peaks algselt ebaõnnestuma, kuna koodi veel ei eksisteeri.
2. Kirjutage testist läbimiseks minimaalne kood: Kirjutage lihtsaim võimalik kood, mis paneb testi läbima. See võib hõlmata väga lihtsat rakendamist.
3. Refaktoreeri: Kui test on läbitud, refaktoreerige oma koodi, et parandada selle kujundust ja loetavust, tagades samal ajal, et kõik testid läbivad endiselt.
4. Korda: Korrake seda tsüklit iga uue funktsiooni või funktsiooni jaoks.

Näide: Kasutame TDD-d, et ehitada funktsioon, mis muudab stringi esimese tähe suurtäheks:

1. Ebaõnnestuv test:

            // src/string-utils.test.ts
import { capitalizeFirstLetter } from './string-utils';

test('muudab stringi esimese tähe suurtäheks', () => {
  expect(capitalizeFirstLetter('hello')).toBe('Hello');
});

            

              
                Copy
              
            
          

2. Testist läbimiseks minimaalne kood:

            // src/string-utils.ts
export function capitalizeFirstLetter(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

            

              
                Copy
              
            
          

3. Refaktoreeri (vajadusel): Sel lihtsal juhul on kood juba suhteliselt puhas. Saame lisada rohkem teste, et katta muid äärmusjuhtumeid.

            // src/string-utils.test.ts (laiendatud)
import { capitalizeFirstLetter } from './string-utils';

test('muudab stringi esimese tähe suurtäheks', () => {
  expect(capitalizeFirstLetter('hello')).toBe('Hello');
  expect(capitalizeFirstLetter('world')).toBe('World');
  expect(capitalizeFirstLetter('')).toBe('');
  expect(capitalizeFirstLetter('123test')).toBe('123test');
});

            

              
                Copy
              
            
          

TDD koos TypeScriptiga tagab, et kirjutate teste algusest peale, andes teile kohese kasu tüübiohutusest, et kaitsta vigade eest.

Parimad praktikad tüübiohutute testide jaoks

Tüübiohutuse testimise eeliste maksimeerimiseks Jesti ja TypeScriptiga kaaluge järgmisi parimaid praktikaid:

• Kirjutage põhjalikke teste: Veenduge, et teie testid katavad kõik erinevad koodirajad ja äärmusjuhtumid. Püüdke saavutada kõrge koodikatvus.
• Kasutage kirjeldavaid testinimesid: Kirjutage selged ja kirjeldavad testinimed, mis selgitavad iga testi eesmärki.
• Kasutage tüübi annotatsioone: Kasutage oma testides ulatuslikult tüübi annotatsioone, et parandada loetavust ja tuvastada tüübiga seotud vead varakult.
• Mockige asjakohaselt: Kasutage mockimist, et isoleerida koodiüksusi ja testida neid iseseisvalt. Vältige liiga palju mockimist, mis võib muuta testid vähem realistlikuks.
• Testige asünkroonset koodi tõhusalt: Kasutage asünkroonse koodi testimisel õigesti async/await või lubadusi.
• Järgige TDD põhimõtteid: Kaaluge TDD kasutuselevõtmist oma arendusprotsessi juhtimiseks ja veendumaks, et kirjutate teste enne koodi kirjutamist.
• Säilitage testitavus: Kujundage oma koodi testitavust silmas pidades. Hoidke oma funktsioonid ja moodulid fookuses, selgete sisendite ja väljunditega.
• Vaadake testikoodi üle: Nii nagu te vaatate üle tootmiskoodi, vaadake regulaarselt üle ka oma testikoodi, et tagada selle hooldatavus, tõhusus ja ajakohasus. Kaaluge testikoodi kvaliteedikontrolli oma CI/CD torujuhtmetes.
• Hoidke testid ajakohasena: Kui teete oma koodis muudatusi, värskendage vastavalt ka oma teste. Vananenud testid võivad põhjustada valepositiivseid tulemusi ja vähendada teie testikomplekti väärtust.
• Integreerige testid CI/CD-sse: Integreerige oma testid oma pideva integreerimise ja pideva juurutamise (CI/CD) torujuhtmesse, et automatiseerida testimist ja tuvastada probleeme arendustsükli varases etapis. See on eriti kasulik ülemaailmsetele arendusmeeskondadele, kus koodimuudatusi saab teha mitmes ajavööndis ja asukohas.

Levinumad lõksud ja tõrkeotsing

Kuigi Jesti ja TypeScripti integreerimine on üldiselt lihtne, võite kohata mõningaid levinud probleeme. Siin on mõned näpunäited tõrkeotsinguks:

• Tüübi vead testides: Kui näete oma testides tüübi vigu, uurige hoolikalt veateateid. Need sõnumid viitavad sageli konkreetsele koodireale, kus probleem peitub. Veenduge, et teie tüübid on õigesti määratletud ja et edastate funktsioonidele õigeid argumente.
• Valed imporditeed: Veenduge, et teie imporditeed on õiged, eriti kui kasutate mooduli aliaseid. Kontrollige oma tsconfig.json ja Jesti konfiguratsiooni.
• Jesti konfiguratsiooniprobleemid: Vaadake hoolikalt üle oma fail jest.config.js, et veenduda selle õiges konfigureerimises. Pöörake tähelepanu valikutele preset, transform ja testMatch.
• Aegunud sõltuvused: Veenduge, et kõik teie sõltuvused (TypeScript, Jest, ts-jest ja tüübimääratlused) on ajakohased.
• Testimiskeskkonna mittevastavused: Kui testite koodi, mis töötab konkreetses keskkonnas (nt brauseris), veenduge, et teie Jesti testimiskeskkond on õigesti konfigureeritud (nt kasutades jsdom).
• Mockimisprobleemid: Kontrollige oma mockimise konfiguratsiooni. Veenduge, et mockid on õigesti seadistatud enne testide käivitamist. Kasutage vastavalt mockResolvedValue, mockRejectedValue ja muid mockimismeetodeid.
• Asünkroonsete testide probleemid: Asünkroonse koodi testimisel veenduge, et teie testid käsitlevad õigesti lubadusi või kasutavad async/await.

Järeldus

Jesti integreerimine TypeScriptiga tüübiohutuse testimiseks on väga tõhus strateegia koodi kvaliteedi parandamiseks, vigade vähendamiseks ja arendusprotsessi kiirendamiseks. Järgides selles juhendis kirjeldatud parimaid praktikaid ja tehnikaid, saate luua vastupidavaid ja hooldatavaid teste, mis aitavad kaasa teie rakenduste üldisele töökindlusele. Ärge unustage oma testimismeetodit pidevalt täiustada ja kohandada seda oma projekti konkreetsetele vajadustele.

Tüübiohutuse testimises ei ole tegemist ainult vigade püüdmisega; see on seotud kindluse loomisega oma koodibaasis, koostöö edendamisega oma ülemaailmses meeskonnas ja lõppkokkuvõttes parema tarkvara tarnimisega. TDD põhimõtted koos TypeScripti ja Jesti võimsusega pakuvad tugeva aluse tõhusamaks ja tulemuslikumaks tarkvaraarenduse elutsükliks. See võib viia teie toote kiirema turuletoomiseni mis tahes maailma piirkonnas ja muuta teie tarkvara selle eluea jooksul lihtsamaks hooldamiseks.

Tüübiohutust testimist tuleks pidada kaasaegsete tarkvaraarenduse tavade oluliseks osaks kõigi rahvusvaheliste meeskondade jaoks. Investeering testimisse on investeering teie toote kvaliteeti ja pikaealisusesse.